<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="130px" class="demo-ruleForm" size="mini">

      <el-form-item label="所属档口" prop="grade" class="dangkou">
        <el-select v-model="form.schoolId" @change="getShiTang" size="mini" clearable placeholder="请选择学校">
          <el-option
            v-for="item in schoolList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="form.shitangId"   @change="getShop" size="mini" clearable placeholder="请选择食堂">
          <el-option
            v-for="item in shitangList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

        <el-select v-model="form.shopId"  size="mini" clearable placeholder="请选择档口">
          <el-option
            v-for="item in shopList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="设备名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入设备名称" clearable></el-input>
      </el-form-item>

      <el-form-item label="设备编号" prop="deviceNo">
        <el-input v-model="form.deviceNo" placeholder="请输入设备编号" clearable></el-input>
      </el-form-item>

      <el-form-item label="刷脸间隔（秒）" prop="limitTime">
        <el-input v-model="form.limitTime" placeholder="请输入刷脸间隔（秒）" type="number" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetForm('form')">{{$t("action.reset")}}</el-button>
        <el-button type="primary" @click="submitForm('form')">{{$t("action.save")}}</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    import Cookies from "js-cookie"

    export default {
        name: "edit",
        data() {
            return {
                url: this.$Config.url,
                id: '',
                form: {
                    name: '',
                    deviceNo: '',
                    shopId: '',//档口id
                    shitangId: '',//食堂id
                    schoolId: '',//学校id
                    limitTime: ''
                },
                schoolList: [],//学校数据
                shitangList: [],//食堂数据
                shopList: [],//档口数据
                rules: {
                    name: [
                        {required: true, message: '请输入设备名称', trigger: 'blur'},
                        {min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur'}
                    ],
                    deviceNo: [
                        {required: true, message: '请输入设备编号', trigger: 'blur'},
                        {max: 64, message: '长度不能超过64个字符', trigger: 'blur'}
                    ],
                }
            };
        },
        mounted() {
            this.getSchool();
        },
        methods: {
            resetData(id = 1) {

              this.$refs["form"].resetFields();//先清空
                const that = this;
                if (id) {
                    this.id = id;
                }
                this.$axios.get(that.url + '/admin/device/get/{id}', {
                    params: {
                        id,
                    },
                    headers: {
                        "x-baie-admin-token": Cookies.get("token")
                    }
                })
                    .then(function (res) {
                        if (res.status == 200) {
                            let data = res.data.data;
                            that.form = {
                                name: data.name,
                                deviceNo: data.deviceNo,
                                shopId: data.shopId,//档口id
                                schoolId: data.deptId,//学校id
                                shitangId:data.marketId,
                                limitTime:data.limitTime
                            }
                            that.getShiTang();
                            that.getShop();
                            that.id = data.id;
                        } else {
                            that.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getShop() {
                const that = this;
                this.$axios.get(that.url + '/admin/shop/list', {
                    params: {
                        marketId: that.form.shitangId
                    },
                    headers: {
                        "x-baie-admin-token": Cookies.get("token")
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.shopList = res.data.data;
                    } else {
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }

                }).catch(function (error) {
                    console.log(error);
                });
            },
            getShiTang() {
                const that = this;
                this.$axios.get(that.url + '/admin/market/list', {
                    params: {
                        deptId: that.form.schoolId
                    },
                    headers: {
                        "x-baie-admin-token": Cookies.get("token")
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.shitangList = res.data.data;
                    } else {
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }

                }).catch(function (error) {
                    console.log(error);
                });
            },
            getSchool() {
                const that = this;
                this.$axios.get(that.url + '/admin/dept/list', {
                    headers: {
                        "x-baie-admin-token": Cookies.get("token")
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.schoolList = res.data.data;
                    } else {
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }

                }).catch(function (error) {
                    console.log(error);
                });
            },
            submitForm(formName) {
                const that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.send();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            send() {
                const that = this;
                if(that.form.limitTime<0){
                  that.$message({
                    message: '时间间隔不能为负数',
                    type: "warning"
                  });
                  return;
                }
                const data = {
                    id: this.id,
                    deptId: that.form.schoolId,
                    name: that.form.name,
                    deviceNo: that.form.deviceNo,
                    shopId: that.form.shopId,
                    limitTime:that.form.limitTime
                }
                this.$axios.post(that.url + '/admin/device/saveOrUpdate', that.$qs.stringify(data), {
                    headers: {
                        "x-baie-admin-token": Cookies.get("token")
                    }
                }).then(function (res) {
                    if (res.status == 200) {
                      if(res.data.code==200){
                        if (that.id == "") {
                          that.$message({
                            message: "添加成功",
                            type: "success"
                          });
                        } else {
                          that.$message({
                            message:"修改成功",
                            type: "success"
                          });
                        }
                        that.$emit("hideEdit", false);
                      }else{
                        that.$message({
                          message: res.data.msg,
                          type: "warning"
                        });
                      }
                    } else {
                        that.$message({
                            message: res.statusText,
                            type: 'warning'
                        });
                    }

                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.form.shopId='';
                this.form.shitangId='';
                this.form.schoolId='';
                this.id='';
                this.form.limitTime="";
            }
        }

    }
</script>

<style scoped lang="scss">
  .el-select, .el-date-editor {
    width: 30%;
  }

  .el-select:not(:last-child) {
    margin-right: 3%;
    display: inline-block;
  }
</style>
